<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<style> 
div
{
width:100px;
height:100px;
background:red;

}
.test{
	animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}


@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
.toTop {
	background-image:-webkit-linear-gradient(to top, orange, green);
	background-image:linear-gradient(to top,orange,green);
}
</style>
<script src="js/jquery-1.4.3.js"></script>
<script>
//-webkit-linear-gradient(360deg, orange, green);

	function ff(){
//		$('div').addClass("toTop");

		$('div').css("transition","5s")  

		$('div').css("background","yellow");
//		$('div').css("background","red");
	}

//		addRule,deleteRule和findRule对keyframes对象进行操作


/*	
	$scope.cool = function (area){
		var url = area.template.image.url;
//		imgPath
		$('#'+area.areaId).css("transition","background 10s linear")  
		$('#'+area.areaId).css("-webkit-transition"," background 10s linear")  
		$('#'+area.areaId).css("background-image","url("+imgPath+url+")");
//		style="background-image: url('{{imgPath+area.template.image.url}}');"
//		$('#'+area.areaId).css("background","yellow");
	
	}
	*/



</script>
	</head>
	<body>
		<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div onclick="ff()"></div>
	</body>
</html>
